Como ficou definido no documento 2, os elementos html podem ser divididos nas seguintes classes :
Classes dos elementos HTML:
1-ELEMENTOS BÁSICOS: <body>
2-ELEMENTOS DE METADADOS: <base><head><link><meta><style>
3-ELEMENTOS DE SEÇÕES DE CONTEÚDO: <address><article><aside> <footer>
<header><h1> a <h6><hgroup><nav>
4-ELEMENTOS DE CONTEÚDOS EM TEXTO: <dd><dl><dt><div><figure>
<figcaption><hr><li><main><ol><p><pre><ul>
5-ELEMENTOS DE TEXTO EM LINHA: <a><abbr><b><br><cite><code>
<data><dfn><em><i><kbd><mark><q><s><samp>
<small><span><strong><sub><sup><time><u><var>
6-ELEMENTOS DE IMAGEM E MULTIMÍDIA: <img><area><audio><map><track><video>
7-ELEMENTOS DE CONTEÚDOS EMBARCADOS :<embed><object><param><source>
8-ELEMENTOS DE SCRIPT: <canvas><noscript><script>
9-ELEMENTOS DE MARCAÇÃO DE EDIÇÃO: <del> <ins>
10-ELEMENTOS DE CONTEÚDOS EM TABELA: <caption><col><colgroup><table>
<tbody><td><tfoot><th><thead><tr>
11-ELEMENTOS DE FORMULÁRIO: <button><datalist><fieldset><form><input>
<label><legend><meter><optgroup><option><output><progress>
<select><textarea>
12-ELEMENTOS INTERATIVOS: <details><menu><menuitem><summary>
Neste documento discutiremos a classe 11-ELEMENTOS DE FORMULÁRIO.
Utilidade desta classe de elementos
A utilidade desta classe de documentos é interagir com usuário de modo que ele possa digitar informações,
selecionar opções, escolher, elaborar e depois disso enviar essas informações para um servidor que irá
processar estas informações.
O ponto mais importante neste aspecto a frisar é que para os dados retornarem ao servidor será necessário
um servidor com um 'mecanismo' que possibilite isso. Essas informações digitadas pelo usuário são encapsuladas
na url (via método get) ou dentro do cabeçalho da requisição ( método post ) mas o servidor tem que ter um
'mecanismo' que possibilite receber e recuperar essas informações. Todos os servidores web possuem esse
mecanismo de recepção de dados mas por motivos de segurança são bem restritos ou específicos.
<button>
No HTML antigo temos a tag input tipo button mas ela foi substituida pela tag button.
A finalidade deste elemento é exibir uma mensagem ao usuário e, caso ele clique neste elemento, disparar um evento
chamado click do botão.
Podemos formatar o botão da maneira que desejarmos. Na tag input type button não é possível mas na tag
button é possível colocar imagens como botões.
Atributos do elemento button:
Atributo
Valor
Descrição
autofocus
autofocus
Especifica que o botão deve receber o foco automaticamente quando a página é carregada
disabled
disabled
Especifica que um botão seja desativado, ficar inoperante
form
form_id
Especifica um ou mais formulários aos quais o botão pertence. Se o botão for tipo submit será neste
form que será dado o submit.
formaction
URL
Especifica para onde enviar os dados do formulário quando um formulário é enviado.
Somente para type="submit"
formenctype
'application/x-www-form-urlencoded' ou 'multipart/form-data' ou 'text/plain'
Especifica como os dados do formulário devem ser codificados antes de enviá-los para um servidor.
Somente para type = "submit"
formmethod
'get' ou 'post
Especifica como enviar os dados do formulário (qual método HTTP usar).
Somente para type = "submit"
formnovalidate
formnovalidate
Especifica que os dados do formulário não devem ser validados no envio.
Somente para type = "submit"
formtarget
_blank, _self, _parent, _top, framename
Especifica onde exibir a resposta após o envio do formulário. Somente para type = "submit"
name
text
Nome do botão
type
button, reset, submit
Especifica o tipo do botão
value
text
Especifica a mensagem escrita sobre o botão
O parâmetro mais importante do botão é o tipo do botão e ele pode ser do tipo button, reset, submit.
O botão do tipo button tem como finalidade informar que o usuário terminou sua interação e dispara um evento
(click) que o JavaScript ou associados podem capturar e trabalhar no processamento da informação.
O botão tipo reset tem como finalidade fazer com que todos os elementos input daquele form voltem ao estado original,
ou seja, o valores dos textboxes voltam ao original, dos options, selections, etc. Isto evita o trabalho que
o usuário teria ao descobrir que errou lá no começo ter que limpar todos os campos na mão.
Importante : Para que o botão tipo reset funcione ele de estar dentro ou apontar para um form pelo parametro
form=xxx<
o botão tipo submit envia as informações para o servidor.
Exemplos:
Podemos ver que visualmente não tem qualquer diferença.
O botão submit como eu não coloquei qualquer parametro nele ele esta fazendo apenas um reload da página.
Nota : Só pra dar uma ideia de como alguns frameworks ajudam nossa vida vou exibir exatamente o botão
do tipo reset só que com as classes do bootstrap. Veja a diferença de visual.
<datalist>
A tag <datalist> especifica uma lista de opções predefinidas para um elemento <input>.
A tag <datalist> é usada para fornecer um recurso "preenchimento automático" nos elementos <input>.
Os usuários verão uma lista suspensa de opções predefinidas à medida que inserem dados.
Use o atributo de lista do elemento <input> para vinculá-lo a um elemento <datalist>.
Exemplo de datalist:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Como o browser exibe:
<fieldset>
O elemento HTML <fieldset> é usado para agrupar elementos, assim como labels (<label>), dentro de um
formulário web.
Exemplo de fildset :
<form action="#" method="post">
<fieldset style="background-color:lightcyan;">
<legend>Titulo</legend>
<input type="radio" id="radio"> Clique me ou digite algo
<input type="text" id="texto1">
</fieldset>
</form>
Como o browser exibe:
<form>
A tag <form> é usada para criar um formulário HTML para entrada do usuário.
Um formulário é um ou mais elementos html que se destinam a armazenar informações ou opções que o usuário
manipula e, posteriormente, enviar essas informações de volta ao servidor. O exemplo típico de um formulário é
a abertura de conta num banco. Um monte de campos para você preencher e depois enviar para o banco.
O elemento <form> pode conter um ou mais dos seguintes elementos de formulário:
<input>, <textarea>, <button>, <select>, <option>, <optgroup>,
<fieldset>, <label>, <output>.
Diferenças entre HTML 4.01 e HTML5 :
O HTML5 adicionou dois novos atributos: autocomplete e novalidate e removeu o atributo accept.
Atributos do elemento form:
Atributo
Valor
Descrição
accept
file_type
Não suportado em HTML5. Especifica uma lista separada por vírgula de tipos de
arquivo que o servidor aceita (que pode ser enviado por meio do upload do arquivo).
accept-charset
character_set
Especifica as codificações de caracteres que devem ser usadas para o envio do formulário.
action
URL
Especifica para onde enviar os dados do formulário quando um formulário é enviado
autocomplete
on, off
Especifica se um formulário deve ter o preenchimento automático ativado ou desativado
enctype
'application/x-www-form-urlencoded' ou 'multipart/form-data' ou 'text/plain'
Especifica como os dados do formulário devem ser codificados ao enviá-los ao servidor
(apenas para o método = "post")
method
'get' ou 'post
Especifica o método HTTP a ser usado ao enviar dados do formulário
name
text
Nome do formulário
novalidate
novalidate
Especifica que o formulário não deve ser validado quando enviado.
target
_blank, _self, _parent, _top
Especifica onde exibir a resposta que é recebida após o envio do formulário."
1-A url é a página de destino das informações. É sempre para o mesmo servidor que enviou a página de
cadastro de informações que foi preenchida pelo usuário.
2-Method:post : Envia as informações embutindo elas no header do MIME do Request ao servidor para processamento
das informações. É o método mais seguro.
3-Method:get : Envia as informações embutindo elas na url da página.
O formato da url ficaria assim: url?p1=x&p2=y&p3=z.
P1, P2 e P3 são exemplos de parâmetros e terão o nome da info que carregam, por exemplo, nome, endereco etc.
É o método muito inseguro pois o usuário pode editar os dados da url mas é muito usado onde isso não tem
qualquer consequencia ou onde o auxílio dos sites de pesquisa ( como google ) é muito importante.
<input>
A tag <input> especifica um campo de entrada onde o usuário pode inserir dados.
Os elementos <input> são usados em um elemento <form> para declarar controles de entrada que permitem que
os usuários insiram dados.
Um campo de entrada pode variar de várias maneiras, dependendo do atributo type.
Em HTML a tag input não tem a tag de fechamento.
Note que este elemento interage diretamente com o sistema operacional onde o browser esta instalado. Nos tipos como
cores abre a caixa de diálogo para escolha de cores, arquivos abre a caixa de diálogo para escolha de arquivo, a data
depende das configurações do sistema operacional do micro e assim por diante.
Atributos do elemento input:
Especifica um filtro para quais tipos de arquivo o usuário pode selecionar na caixa de
diálogo de entrada de arquivo (apenas para type = "file")
align
left, right, top, middle, bottom
Não suportado no HTML5
.
Especifica o alinhamento de uma entrada de imagem (apenas para type="image")
alt
text
Especifica um texto alternativo para imagens quando elas não puderem ser exibidas pelo
browser (apenas para type="image")
autocomplete
on, off
Especifica se o elemento <input> deve ter o preenchimento automático ativado ou desativado
autofocus
autofocus
Especifica que elemento <input> deve receber o foco automaticamente quando a página é carregada
checked
checked
Especifica que o elemento <input> deve ser pré-selecionado ( marcado, ticado )quando a página
carregar (para type="checkbox" ou type="radio")
dirname
inputname.dir
Especifica que a direção do texto será enviado
disabled
disabled
Especifica que o elemento <input> seja apresentado como desativado, sem operar
form
form_id
Especifica o formulário ao qual o elemento <input> pertence.
formaction
URL
Especifica a URL do arquivo que processará o controle de entrada quando o formulário for enviado
(para type="submit" e type="image").
formenctype
'application/x-www-form-urlencoded' ou 'multipart/form-data' ou 'text/plain'
Especifica como os dados do formulário devem ser codificados ao enviá-los para o servidor
(para type = "submit" e type = "image")
formmethod
'get' ou 'post
Define o método HTTP para enviar dados para o URL da ação (para type = "submit" e type = "image")
formnovalidate
formnovalidate
Especifica que os dados do formulário não devem ser validados no envio.
Somente para type = "submit"
formtarget
_blank, _self, _parent, _top, framename
Especifica onde exibir a resposta que é recebida após o envio do formulário
(para type = "submit" e type = "image")
height
pixels
Especifica a altura de um elemento <input> (apenas para type = "image")
list
datalist_id
Refere-se a um elemento <datalist> que contém opções predefinidas para o elemento <input>
max
número ou data
Especifica o valor máximo para o elemento <input>
maxlength
number
Especifica o número máximo de caracteres permitido no elemento <input>
min
número ou data
Especifica um valor mínimo para o elemento <input>
multiple
multiple
Especifica que um usuário pode inserir mais de um valor em um elemento <input>
name
text
Nome do elemento <input>
pattern
regexp
Especifica uma expressão regular com a qual o valor de um elemento <input> é verificado
placeholder
text
Especifica uma dica curta que descreve o valor esperado de um elemento <input>
readonly
readonly
Especifica que um campo de entrada é somente leitura, ou seja, não pode ser alterado pelo usuário.
Somente para que o usuário visualize se o valor esta correto porque, possivelmente, no futuro
será enviado ao servidor.
required
required
Especifica que um campo de entrada deve ser preenchido antes de enviar o formulário.
size
numérico inteiro
número Especifica a largura, em caracteres, de um elemento <input>.
src
URL
Especifica o URL da imagem a ser usada como um botão de envio (apenas para type="image")
step
numérico inteiro
Especifica o intervalo entre números legais em um campo de entrada
Especifica o valor inicial para o elemento, um default value <input>
width
pixels
Especifica a largura de um elemento <input> (apenas para type = 'image')>
Diferença entre Placeholder e value
Quando você coloca o parâmetro value na tag mesmo que o usuário não digite nada esse 'value' será enviado
de volta ao servidor no submit/post da página.
Quando você coloca apenas o parâmetro placeholder o valor colocado lá será exibido como fundo e
conteúdo do campo mas ao enviar o campo ao servidor esse valor não será enviado ao servidor, será enviado
branco, vazio se o usuário não digitar nada.
Como o browser exibe os diversos elementos Input:
Todas as tags são inputs do tipo definido com o placeholder=dica e value=valor.
Botão Comum : Input type button
Tipo botão :
Código :
Tipo botão : <input type="button" placeholder="Dica" value="Value" />
A finalidade deste elemento é no clique dele disparar um evento através do evento onclick.
Input type CheckBox
Sexo:
Tipo checkbox : Masculino
Tipo checkbox : Feminino
A finalidade deste elemento é receber a opinião do usuário que pode ou não clicar nele e firmar uma escolha.
Note que o usuário pode escolher um ou outro independentemente.
Input type Color
Tipo color :
Código :
Tipo color : <input type="color" placeholder="Dica" value="Value" />
Abre o Color-Dialog-Box do windows para a escolha da cor.
Input type Date(Data)
Tipo date :
Abre o Date-Picker(Calendário) do windows para a escolha da data.
Ao clicar na seta para cima ou para baixo do elemento mudamos o dia.
Input type DateTime-Local
Tipo datetime-local :
Código :
Tipo datetime-local : <input type="datetime-local" placeholder="Dica" value="Value" />
Abre o Date-Picker(Calendário) do windows para a escolha da data mas o horário tem que ser digitado na mão.
Ao clicar na seta para cima ou para baixo do elemento mudamos o dia.
Input type Email
Tipo email :
Código :
Tipo email : <input type="email" placeholder="Dica" value="Value" />
Podemos digitar qualquer texto nele, mesmo caracteres que não são de um email tipico.
Input type File
Tipo file :
Código :
Tipo file : <input type="file" placeholder="Dica" value="Value" />
Abre o File-Picker(Caixa de diálogo para escolha de arquivo) do windows. Muito utilizado para
fazer file upload ( envio de arquivos para o servidor)
Input type Hidden(Escondido)
Tipo hidden :
Código :
Tipo hidden : <input type="hidden" placeholder="Dica" value="Value" />
Este tipo de input não é exibido e sua maior utilidade é armazenar informações para que o JavaScript ou outro elemento
busque e utilize numa iteração com o usuário.
Cuidado: O campo input type=hidden não é enviado para o servidor no submit de um form.
No tipo Image temos que declarar o atributo src senão nenhuma imagem é exibida.
Input type month
Tipo month :
Código :
Tipo month : <input type="month" placeholder="Dica" value="Value" />
Abre o Date-Picker(Calendário) do windows para a escolha da data mas o horário tem que ser digitado na mão.
Ao clicar na seta para cima ou para baixo do elemento mudamos o mês.
Input type Number(Número)
Tipo number :
Código :
Tipo number : <input type="number" placeholder="Dica" value="Value" />
Permite escolher um número natural(-n a +n) - Inteiro.
Input type Password(Senha)
Tipo password :
Código :
Tipo password : <input type="password" placeholder="Dica" value="Value" />
Este tipo de elemento é muito útil para quando o usuário tem que digitar uma senha ou dado secreto e quem
estiver ao lado dele não deva ver o que esta sendo digitado.
Input type Radio
Sexo:
Tipo radio1 : Masculino
Tipo radio2 : Feminino
Importante :
1-Nas tags radio1 e radio2 no parâmetro name foram definidos como : name='radiox'. Por isto eles estão
conectados lógi camente o que faz que apenas um possa ser escolhido deste grupo de mesmo nome.
2-Se o radio1 e radio2 não estiverem conectados lógicamente ao pressionar o botão radio1 o usuário não poderá
mais 'despressionar' o botão. Esta funcionalidade só poderá ser feita por um botão reset ou reload da página.
3-Para conectar o radio1 e o radio2 temos que utilizar o mesmo name para todos os botões. Note que ao agrupar estes
elementos pelo nome estamos criando um array de elementos e por este motivo o JavaScript não deve procurar pelo
getElementByName('radiox') porque não é só um elemento, mas sim um array de elementos. O correto seria
getElementByName('radiox')[0].
Input type Range
Tipo range :
Código :
Tipo range : <input type="range" min="1" max="100" placeholder="Dica" value="Value" />
Definimos no elemento acima min="1" max="100". Note que ao mudar o valor não é exibido por default.
Input type Reset
Tipo reset :
Código :
Tipo reset : <input type="reset" placeholder="Dica" value="Value" />
Este botão é muito útil quando desejamos fazer com que todos os elementos input de um form voltarem aos seus
valores iniciais, por exemplo, o nome ficar em branco, as opções ficariam com nenhuma escolhida ou as escolhidas
por default.
Importante : Para que este botão funcione ele precisa estar ligado a um form.
Input type Search (Procurar, Pesquisar)
Tipo search :
Código :
Tipo search : <input type="search" placeholder="Dica" value="Value" />
Podemos digitar qualquer texto neste elemento.
Input type Submit ( Enviar ao servidor - Submeter )
Tipo submit :
Código :
Tipo submit : <input type="submit" placeholder="Dica" value="Value" />
Este botão invoca o serviço HTTPREQUEST ( como o do AJAX ) e envia as informações do formulário para o servidor.
Importante : No form temos os parâmetros action que define a url a quem devemos enviar os dados, method que define se os dados
devem ser enviados via método post ou get.
Este botão tem a serventia de dizer que o usuário terminou de digitar as informações e deseja enviá-las ao servidor.
Input type tel (telefone)
Tipo tel :
Código :
Tipo tel : <input type="tel" placeholder="Dica" value="Value" />
Podemos digitar qualquer texto neste elemento mesmo não sendo numérico.
Input type Text
Tipo text :
Código :
Tipo text : <input type="text" placeholder="Dica" value="Value" />
Podemos digitar qualquer texto neste elemento.
Input type Time
Tipo time :
Código :
Tipo time : <input type="time" placeholder="Dica" value="Value" />
Podemos escolher de 00 a 23:59 neste elemento pelas setas ou digitando diretamente o valor nas horas e minutos.
Abre o Date-Picker(Calendário) do windows para a escolha da data.
Ao clicar na seta para cima ou para baixo do elemento mudamos a semana do ano.
<label>
Um elemento HTML <label> representa uma legenda para um item em uma interface de usuário, uma mensagem qualquer,
um texto qualquer.
Ele pode estar associado com um elemento de controle, colocando este dentro do elemento label, ou usando o atributo for.
Tal controle é chamado o controle etiquetado do elemento etiqueta.
Um input pode ser associado a diversas etiquetas (<label>s).
É muito pouco usada porque podemos digitar o texto sem a tag label e ele é exibido da mesma maneira.
Exemplo :
<label>Tenha um <b>bom</b> dia</label>
Como o browser exibe:
Como o browser exibe: Tenha um bom dia mas como texto simples.
<legend>
O Elemento HTML <legend> (ou Elemento HTML Campo "Legend") representa um título para o conteúdo do seu
ancestral <fieldset>. Define uma legenda para o elemento <fieldset>.
O elemento fieldset é um elemento agrupador de campos input e button.
Importante: O elemento optgroup é exibido dentro do Select apenas como separador, não pode ser selecionado
como uma opção comum.
<option>
O elemento option é uma das opções do elemento select apresentado acima.
<output>
A tag <output> representa o resultado de um cálculo (como o realizado por um script).
Exemplo:
Como o browser exibe:
O primeiro elemento é o input type range é o controle que deslizamos para alterar o valor. O valor dele é fixo de
0 a 100
O segundo valor é o valor que se esta somando ao valor corrente do range.
E finalmente o quarto valor é o output onde exibimos o valor da soma dos dois itens anteriores.
<progress>
A tag <progress> representa o progresso de uma tarefa através de um progress bar que pode ser controlado
pelo javascript ou recurso semelhante.
Apresenta um conjunto de opções ao usuário. Este controle é fundamental quando queremos
que o usuário selecione uma das alternativas dentre um leque de opções.
Um caso tipico seria um nome de rua. Se você deixar o usuário digitar ele vai abreviar,
escrever errado, etc.
Mas com o select ele só pode escolher uma opção dentre diversas corretas.
Veja o comando OptionGroup acima.
Mais alguns exemplos :
Select com 14 elementos mas só quero exibir 7
Um select com 14 itens e com o parâmetro size=7 o que faz com que apenas os 7 primeiros
item sejam exibidos.
Por este motivo é exibido a barra de rolagem vertical.
Select com menos itens que não preenchem
Um select com size 8 sendo que todos os item não enchem o SELECT e o 4. item esta selecionado:
Selecionando multiplos elementos do Select
Um select com size 8 e com o atributo multiple (use as teclas control e shift junto com
o mouse para selecionar os itens):
Incrementando o nosso Select.
Podemos fazer nosso select mais estilizado utilizando o option Group. Veja exemplo abaixo.
Qual a sua cerveja predileta?
A vantagem do OptionGroup é que podemos dar um nome a um grupo de opções, destacando-o
das demais opções, sendo que o nome do grupo de opções não é selecionável.
A tag input type text é utilizada quando desejamos escrever pequenos textos ou textos de apenas uma linha.
Quando desejamos reservar uma área do browser para que o usuário preencha um texto longo, utilizamos a tag
textarea.
Exemplo : Definindo um textarea de 4 linhas por 50 colunas ( caracteres por linha ):
<textarea rows="4" cols="50">
Este é um exemplo de textarea1.
Este é um exemplo de textarea2.
</textarea>
Como o browser exibe:
Importante : Como o elemento é um elemento de texto ele obedece as regras de texto e portanto CRLF e espaços
serão tratados como texto comum e não como html.
Importante : Nem todos os atributos e parâmetros dos elementos acima foram listados neste documento.
Isto será uma tarefa para futura complementação.